/**
* ATA章节号
*/
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="zjh">
							<template #label><vp-label zh="章节号" en="Chapter No." /></template>
							<el-input v-model="searchForm.zjh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bz">
							<template #label><vp-label zh="备注" en="Remark" /></template>
							<el-input v-model="searchForm.bz" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'basedataAta.edit'" @click="handleAdd" />
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModelAta" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="zjh" title="章节号" show-overflow width="200">
					<template #header><vp-label zh="章节号" en="Chapter No." /></template>
				</vxe-column>
				<vxe-column field="zwms" title="中文描述" show-overflow>
					<template #header><vp-label zh="中文描述" en="CN Desc." /></template>
				</vxe-column>
				<vxe-column field="ywms" title="英文描述" show-overflow>
					<template #header><vp-label zh="英文描述" en="EN Desc." /></template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" width="140">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit text v-auth="'basedataAta.edit'" @click="handleEdit(scope.row)" />
							<vp-btn-del text v-auth="'basedataAta.edit'" @click="handleDelete(scope.row)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
	</vp-main-page>
</template>
<script setup lang="ts" name="basicDataAcModel">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import VpMessageBox from '/@/components/vp/VpMessageBox';

const searchForm = reactive({
	zjh: "",
	bz: ""
});


const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);


// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/basicData/ata/list', {
		params: {
			...searchForm,
		}
	}).then(res => {
		tableData.value = res?.data
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchFormRef.value.resetFields();
}

onMounted(() => {
	loadDataList();
})

const editAtaRef = ref();
const tableRef = ref();

const handleAdd = () => {
	editAtaRef.value.handleOpen('add');
}

const handleEdit = (row: any) => {
	editAtaRef.value.handleOpen('edit', row.id);
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		loading.value = true;
		request.delete(`/basicData/ata/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	});
}

</script>